<template>
	<div class="time-beds" ref="timeBeds" :style="{ width: width }">
		<div class="flex head">
			<div class="cell" v-for="bed in beds" :key="bed">床位{{ bed }}</div>
		</div>
		<div class="panels" draggable="false">
			<div v-for="(vertical, i) in panels" :key="'bed' + i" class="vertical">
				<div
					v-for="(cell, j) in vertical"
					:key="i + '-' + j"
					class="cell"
					:class="{
						use: cell.use,
						recent_before: cell.recent_before,
						before_day: isBeforeDay,
						after_day: isAfterDay,
						hover: cell.hover
					}"
					draggable="false"
					@click="cellClick(cell)"
					@dragenter="$emit('cell-dragenter', cell)"
					@mouseenter="onMouseenter(cell)"
					@mouseleave="onMouseleave(cell)"
				>
					<template v-if="!cell.recent_before && !isBeforeDay">
						<div v-if="hasDisable(cell)" class="disable-tips">
							老师/床位不足<br />
							无法预约
						</div>
						<div v-else>
							<el-button
								v-if="cell.hover"
								class="btn"
								type="text"
								icon="el-icon-plus"
							>
								添加预约
							</el-button>
							<span v-else class="leisure">空闲</span>
						</div>
					</template>
				</div>
			</div>
			<!-- 最近时间 -->
			<div
				v-if="isToday && !!beds"
				class="recent-time"
				:style="{ top: recentTime.top + 'px' }"
			>
				<div class="time">
					最近时间<br />
					{{ recentTime.time }}
				</div>
			</div>
			<slot></slot>
		</div>
		<cl-empty v-if="!beds">
			<template #tips
				>门店“{{ shop.dept_name }}”还未配置床位，<el-button
					type="text"
					@click="$emit('to-shop')"
				>
					前往配置
				</el-button>
			</template>
		</cl-empty>
	</div>
</template>
<script>
export default {
	props: {
		panels: {
			type: Array,
			default: () => []
		},
		condition: {
			type: Object,
			default: () => ({
				teacher: 0,
				bed: 0
			})
		},
		beds: {
			type: Number,
			default: 0
		},
		recentTime: {
			type: Object,
			default: () => ({})
		},
		shop: {
			type: Object,
			default: () => ({})
		},
		isToday: Boolean,
		isBeforeDay: Boolean,
		isAfterDay: Boolean
	},
	computed: {
		width() {
			if (!this.beds) {
				return "calc(100% - 150px)";
			}
			return this.beds * 110 + "px";
		}
	},
	methods: {
		// scrollTo() {
		// 	this.$refs.timeBeds.scrollTo({ top: 0 });
		// }
		hasDisable(cell) {
			const { teacher } = this.condition;
			if (!teacher) return true;
			return cell.bed > teacher;
		},
		cellClick(cell) {
			if (this.hasDisable(cell)) return;
			this.$emit("cell-click", cell);
		},
		onMouseenter(cell) {
			if (this.hasDisable(cell)) return;
			cell.hover = true;
			this.$emit("cell-mouseenter", cell);
		},
		onMouseleave(cell) {
			cell.hover = false;
			this.$emit("cell-mouseleave", cell);
		}
	}
};
</script>
<style lang="scss" scoped>
.time-beds {
	position: absolute;
	top: 0;
	left: 50px;
	padding-right: 100px;
	text-align: center;
	width: 100%;
	.panels {
		position: relative;
		display: flex;
		user-select: none;
	}
	.cell {
		text-align: center;
		width: 110px;
	}
	.head {
		position: sticky;
		top: 0;
		z-index: 9;
		background: #fff;
		box-shadow: 1px 0 0 0 #fff, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #fff, inset 1px 0 0 0 #fff,
			inset 0 1px 0 0 #fff;
		user-select: none;
		.cell {
			height: 30px;
			line-height: 30px;
		}
	}
	.vertical {
		.cell {
			height: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8,
				inset 1px 0 0 0 #e8e8e8, inset 0 1px 0 0 #e8e8e8;
			cursor: pointer;
			position: relative;
			.disable-tips {
				cursor: not-allowed;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				background: #f8f8fc;
				box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8,
					inset 1px 0 0 0 #e8e8e8, inset 0 1px 0 0 #e8e8e8;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 12px;
				color: #c1c1c1;
				overflow: hidden;
			}
			.leisure {
				font-size: 16px;
				color: #c1c1c1;
			}

			&.recent_before,
			&.before_day {
				background: #f8f8fc;
				cursor: not-allowed;
			}
		}
	}

	.recent-time {
		position: absolute;
		width: calc(100% + 50px);
		border-top: solid 2px $color-primary;
		display: flex;
		justify-content: flex-end;
		cursor: pointer;
		height: 1px;
		.time {
			display: inline-block;
			position: relative;
			transform: translateX(50%);
			color: $color-primary;
			font-size: 14px;
			margin-top: 10px;
			&::before {
				content: "";
				position: absolute;
				top: -11px;
				left: 50%;
				transform: translate(-50%, -50%);
				display: inline-block;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background: $color-primary;
			}
		}
	}
}
</style>
